<template>
    <div class="Information">
        <div class="Information-title">
            <el-button type="danger"  size="mini" >删除</el-button>
            <el-button type="primary"  size="mini" >标为已读</el-button>
        </div>
        <div class="Information-table">
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                prop="name"
                label="标题"
                width="150">
                </el-table-column>
                <el-table-column
                prop="address"
                label="内容"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                label="日期"
                width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tableData: [{
                date: '2022-04-28',
                name: '来自任老师的奖励',
                address: '奖励刘赵杰同学平时分满分！'

            }],
            multipleSelection: []
        }
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
}
</script>

<style scoped>
.Information-title{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
</style>